<template>
  <el-pagination
    v-model:current-page="paginationData.currentPage"
    v-model:page-size="paginationData.pageSize"
    :total="props.total"
    :hide-on-single-page="false"
    background
    :layout="props.layout"
    :pager-count="props.pagerCount"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue'

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  loadList: {
    type: Function as PropType<(...args: any[]) => void>,
    default: () => {}
  },
  layout: {
    type: String,
    default: 'sizes, total, prev, pager, next, jumper'
  },
  pagerCount: {
    type: Number,
    default: 7
  }
})

const paginationData = ref({
  currentPage: props.currentPage,
  pageSize: props.pageSize
})

interface EmitsType{
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
}
const emits = defineEmits<EmitsType>()

const handleCurrentChange = (page: number) => {
  emits('update:currentPage', page)
  props.loadList()
}

const handleSizeChange = (size: number) => {
  emits('update:currentPage', 1)
  emits('update:pageSize', size)
  props.loadList()
}
</script>

<style scoped lang="scss">
.el-pagination{
  margin-top: 30px;
}
</style>
